<!--
* description: 快返件查询
* author: xuliwen
* createdDate: 2021-01-21
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :key="oneTableKey"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-api-style="'restful'"
    />
    <detail
      :key="detailPopupsKey"
      :dynamic-edit-row-data="detailRowData"
      :popups-visible.sync="detailPopupsVisible"
      :popups-state="editPopupsState"
    />
    <edit
      :key="editPopupsKey"
      :dynamic-edit-row-data="editRowData"
      :popups-visible="editPopupsVisible"
      :popups-state="editPopupsState"
      :dynamic-api-style="'restful'"
      @close="close"
    />
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/se/coreManagement";
import Vue from "vue";

export default {
  name: "ReturnNoticeQuery",

  components: {
    OneTableTemplate,
    Edit: () => import("./edit"),
    Detail: () => import("./detail"),
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, ""], function () {
      next();
    });
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);

    return {
      editRowData: {},
      detailPopupsKey: "1",
      detailRowData: {},
      detailPopupsVisible: false,
      // 网格查询API配置对象
      apiConfig: api.querySoonReturn,

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          name: "search",
          clickEvent: () => this.queryTable(1),
          text: this.$t("sys.button.query"), // 查询
          position: "right",
          fuzzySearch: true,
        },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          name: "reset",
          clickEvent: () => this.reset(),
          text: this.$t("sys.button.reset"),
          position: "right", // 重置
        },
        // {
        //   compKey: "btnKey3",
        //   type: "",
        //   size: "small",
        //   name: "add",
        //   clickEvent: this.add,
        //   text: this.$t("sys.button.add"), // 新增
        //   position: "left",
        // },
        // {
        //   compKey: 'btnKey4',
        //   type: 'primary',
        //   size: 'small',
        //   clickEvent: () => this.importcar(),
        //   text: '导入',
        //   name: 'import', // 按钮图标样式
        //   position: 'upload'
        // },
        // {
        //   compKey: 'btnKey5',
        //   type: '',
        //   size: 'small',
        //   clickEvent: () => this.download(),
        //   text: '下载模板',
        //   name: 'download',
        //   position: 'right'
        // },
        // {
        //   compKey: "btnKey3",
        //   type: "",
        //   size: "small",
        //   clickEvent: () => this.exportExcel111(),
        //   text: "导出",
        //   name: "export",
        //   position: "left",
        // },
      ],

      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
              .tableComponents
          : [
              {
                compKey: "compKey1",
                labelName: "快返通知编号：",
                codeField: "notifyCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey2",
                labelName: "通知日期：",
                codeField: "notifyDateStart,notifyDateEnd",
                component: () =>
                  import("@/components/org/datePicker/andtDatePicker"),
                type: "YYYY-MM-DD",
                // dataToObject: { timer: true, thirtyTime: true, hhmmss: true },
                format: "yyyy-MM-dd",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey3",
                labelName: "索赔单号：",
                codeField: "preAuthorCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey4",
                labelName: "VIN码：",
                codeField: "vin",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMul: false,
                isMust: true,
              },
              {
                compKey: "compKey5",
                labelName: "回复日期：",
                codeField: "repleyDateStart,repleyDateEnd",
                component: () =>
                  import("@/components/org/datePicker/andtDatePicker"),
                type: "YYYY-MM-DD HH:mm:ss",
                // dataToObject: { timer: true, thirtyTime: true, hhmmss: true },
                format: "yyyy-MM-dd",
                isMul: false,
                isMust: false,
              },
              //  {
              //   compKey: "compKey6",
              //   labelName: "返件日期：",
              //   codeField: "discardDate",
              //   component: () =>  import("@/components/org/datePicker/andtDatePicker"),
              //   type: "YYYY-MM-DD HH:mm:ss",
              //   // type: 'twoDatePicker',
              //   dataToObject: { timer: true, thirtyTime: true },
              //   hhmmss: true, //默认有时分秒
              //   format: "yyyy-MM-dd",
              //   dateOptionsType: "0",
              //   isMul: false,
              //   isMust: false,
              // },
              {
                compKey: "compKey7",
                labelName: "状态：",
                codeField: "status",
                component: () => import("@/components/org/LookupValue"),
                oFields: "status,statusName",
                options: [
                  { status: "0", statusName: "已发布" },
                  { status: "1", statusName: "已回复" },
                ],
                type: "dropdownList",
                isMul: false,
                isMust: false,
              },
              //  {
              //   compKey: 'compKey3',
              //   labelName: '总部利润率：',
              //   codeField: 'partNameCode',
              //   component: () => import('@/components/org/commonInput/sectionInput'),
              //   type: 'inputText',
              //   isMul: false,
              //   isMust: true
              // },
            ],

      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "notifyId",
                label: "通知id",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "controlBtn1",
                label: "操作",
                minWidth: 180,
                isComponent: true,
                comps: [
                  {
                    compKey: "propKey1",
                    labelName: "回复",
                    rowFileds: "show:status-已发布",
                    component: () => import("@/components/org/linkButton"),
                    clickEvent: (index) => this.edit(index),
                  },
                  {
                    compKey: "propKey2",
                    labelName: "详情",
                    component: () => import("@/components/org/linkButton"),
                    clickEvent: (index) => this.detail(index),
                  },
                ],
              },
              {
                prop: "notifyCode",
                label: "返件通知编号",
                width: 140,
              },
              {
                prop: "notifyDate",
                label: "通知时间",
                width: 140,
              },
              {
                prop: "empName",
                label: "通知发布人",
              },
              {
                prop: "dlrCode",
                label: "门店编码",
              },
              {
                prop: "dlrName",
                label: "门店名称",
              },
              {
                prop: "preAuthorCode",
                label: "索赔单号",
                width: 140,
              },
              {
                prop: "repleyDate",
                label: "回复日期",
                width: 140,
              },
              {
                prop: "status",
                label: "状态",
              },
              {
                prop: "vin",
                label: "VIN码",
              },
              // {
              //   prop: "areaRemark",
              //   label: "返件日期",
              // },
            ],

      // 表单查询数据
      formField: this.$utils.getFormField(
        this,
        {
          notifyCode: "",
          notifyDateStart: "",
          notifyDateEnd: "",
          preAuthorCode: "",
          vin: "",
          repleyDateStart: "",
          repleyDateEnd: "",
          returnStatus: "",
          status: "",
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
    };
  },

  mounted() {
    // 列表查询
    this.queryTable(1);
  },

  methods: {
    goPage(index) {
      const paramsData = this.$refs["multipleTable"].list[index];
      this.$router.push({ name: "returnNoticeReply", params: paramsData });
    },
    // 编辑获取数据
    edit(index) {
      this.editPopupsState = "edit";
      this.editPopupsVisible = true;
      this.editRowData = this.$utils.deepCopy(
        this.$refs["multipleTable"].list[index]
      );
    },

    detail(index) {
      this.editPopupsState = "edit";
      this.detailPopupsVisible = true;
      this.detailRowData = this.$refs["multipleTable"].list[index];
    },
  },
};
</script>
